<template>
       <div  :style="{'width':width,'height':height}"></div>
</template>

<script>
 //import { calMin, calMax, calInterval } from "@/utils/chart";
 import resize from "@/utils/mixins/resize";
//import resize from "../../../utils/mixins/resize";


import echarts from "echarts";
export default {
  name: "echartsDemo",
  props:{
      width:{
          type:String,
          default:"100%",
      },
     height:{
          type:String,
          default:"100%",
      },
      salaryData: {
         required: false,
      },

  },
  mixins: [resize],
   watch: {
    salaryData: {
      handler(val) {
        if (!val) return;
        this.setOptions(val);
      },
    },
  },
  data() {
    return {
       chart:null,

    };
  },
  created() {},
  mounted() {
      
      let _self = this;
      this.$nextTick(() => {
          _self.initChat();
       
      });

   
  },
   beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
      initChat() {
          //this.chart = this.$echarts.init(this.$el);
          this.chart = echarts.init(this.$el);
          if (!this.salaryData) return;
          this.setOptions(this.salaryData);
     },
     setOptions({xAxisData,seriesData}){
         let option = {
            xAxis: {
              type: 'category',
              data: xAxisData
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data:seriesData,
                type: 'line'
              }
            ]
          };
          this.chart.setOption(option, true);
     }
  }


};
</script>

<style lang="scss" scoped>

</style>
